23. Data i czas na stronie


    Operowanie na datach i czasie ma szczeg≤lnie znaczenie w JavaScript, poniewa┐ przydaje siΩ w wielu sytuacjach, chocia┐by przy obs│udze ciasteczek, czy przy tworzeniu zegark≤w, czym konkretnie zajmiemy siΩ w tej lekcji.

Generalnie korzystanie z daty i czasu opiera siΩ na znajomo╢ci formularzy, umiejΩtno╢ci wywo│ywania danej funkcji po up│ywie okre╢lonego czasu oraz znajomo╢ci obiektu Date. Ca│y kod takiego skryptu mo┐na zatem podzieliµ na trzy g│≤wne czΩ╢ci: pobranie daty i jej sformatowanie, wypisanie na formularzu oraz rekurencujne wywo│anie z op≤╝nieniem jednej sekundy.

Zobaczmy jak wygl▒da│ by najprostszy zegarek i data:

<SCRIPT LANGUAGE="JavaScript">
<!--

 function Data_i_czas()
  {
   data = new Date();
   s_data = data.getYear() + "/" + data.getMonth() + "/"
    + data.getDate();
   document.form1.data.value = s_data;
   s_czas = data.getHours() + ":" + data.getMinutes() + ":"
    + data.getSeconds();
   document.form1.czas.value = s_czas;
   setTimeout("Data_i_czas()", 1000);
  }

//-->
</SCRIPT>

i czΩ╢µ sekcji cia│a:

<BODY onLoad="Data_i_czas()">

<FORM name="form1">
Dzisiaj mamy <INPUT TYPE="text" NAME="data" SIZE="8">
 i godzinΩ <INPUT TYPE="text" NAME="czas" SIZE="8">
</FORM>

Co daje efekt:

Dzisiaj mamy i godzinΩ

Mo┐na po╢wiΩciµ wiΩksz▒ uwagΩ formatowaniu daty, np.: jednocyfrowe jednoski zamieniaµ na dwucyfrowe o postaci "0#", wy╢wietlaµ czas w systemie 12-godzinnym "AM/PM", wypisywaµ dzie± tygodnia lub miesi▒c s│ownie, itp.

Z zamian▒ jednocyfrowych znak≤w na dwucyfrowe nie powinni╢cie mieµ k│opotu znaj▒c instrukcjΩ warunkow▒ if lub operator () ? :. To samo tyczy siΩ zamiany na system "AM\PM". Dla tych, kt≤rzy nie mog▒ sobie poradziµ z tak▒ implementacj▒, funkcja wygl▒da│a by tak (je┐eli jednak wiesz jak to zrobiµ, nak│aniam do napisania tego samodzielnie - trening czyni mistrza):

s_czas = (document.form2.ampm.checked && (data.getHours() > 12))
 ? data.getHours() - 12: data.getHours();
s_czas += ":" + (((data.getMinutes() <= 9) ? "0" : "")
 + data.getMinutes();
s_czas += ":" + (((data.getSeconds() <= 9) ? "0" : "")
 + data.getSeconds();

Zak│adaj▒c, ┐e "ampm" jest obiektem typu checkbox nale┐▒cym do formularza "form2", powinni╢my otrzymaµ co╢ takiego:

AM\PM

Do zamiany miesiΩcy i dni tygodnia na s│owne odpowiedniki przypisanych im liczb, najlepsza bΩdzie instrukcja warunkowa switch lub umie╢ciµ w tablicach nazwy dni tygodnia i miesiΩcy:

Dzi╢ jest <SCRIPT LANGUAGE="JavaScript">
<!--

DayName = new Array(7)
DayName[0] = "niedziela, "
DayName[1] = "poniedzia│ek, "
DayName[2] = "wtorek, "
DayName[3] = "╢roda, "
DayName[4] = "czwartek, "
DayName[5] = "pi▒tek, "
DayName[6] = "sobota, "
MonthName = new Array(12)
MonthName[0] = " stycznia "
MonthName[1] = " lutego "
MonthName[2] = " marca "
MonthName[3] = " kwietnia "
MonthName[4] = " maja "
MonthName[5] = " czerwca "
MonthName[6] = " lipca "
MonthName[7] = " sierpnia "
MonthName[8] = " wrze╢nia "
MonthName[9] = " pa╝dziernika "
MonthName[10] = " listopada "
MonthName[11] = " grudnia "
today = new Date();
weekDay = today.getDay();
nowDate = today.getDate();
nowMonth = today.getMonth();
nowYear = today.getYear();
document.write(DayName[weekDay])
document.write(nowDate)
document.write(MonthName[nowMonth])
nowYear = ((nowYear >= 0 && nowYear < 100 ) ? '19' : '' ) + nowYear
document.write(nowYear)

//-->
</SCRIPT>
Dzi╢ jest

Inne przyk│ady zegark≤w znajdziesz w gotowych skryptach.